import React, { Component } from "react";
// 组件
import MainLayout from "../../../component/mainLayout/mainLayout";

import { connect } from "react-redux";
import yhTools from "../../../tools/yh";
import "./selectCoupon.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2020-06-20
 */
@connect(state => ({
	payCouponList: state.getAppPlatformsDatas.payCouponList,
	payCoupon: state.getAppPlatformsDatas.payCoupon
}))
class selectCoupon extends Component {
	constructor(props) {
		super(props);
		this.state = {
			payCouponInfo: {},
			payCouponList: []
		};
	}
	/*******************生命周期 start************************/
	componentDidMount = () => {
		this.setState({
			payCouponInfo: this.props.payCoupon,
			payCouponList: this.props.payCouponList
		});
	};
	componentWillUnmount = () => {};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	// 详情显示
	detShowClick(index) {
		this.setState(function (state) {
			return {
				payCouponList: state.payCouponList.map((item, _index) =>
					_index == index ? { ...item, detShow: !item.detShow } : item
				)
			};
		});
	}

	// 选中项
	itemCheck(index) {
		this.setState({
			payCouponInfo: this.props.payCouponList[index]
		});
	}
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { payCouponInfo, payCouponList } = this.state;
		const _pageParams = {
			header: {
				title: "我的卡券",
				goBackAction: () => {
					yhTools.setCoupon(payCouponInfo);
					yhTools.closePage();
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="coupon-content">
					{payCouponList.map((item, index) => {
						return (
							<div className="coupon-item" key={index}>
								<div className="info-content">
									<div className="coupon-imgbox">
										<img src={item.couponUrl} alt="优惠券logo" />
									</div>
									<div className="content">
										<div className="name">{item.couponName}</div>
										<div className="price-info-content">
											<div className="price-info">
												<span>¥</span>
												<span className="large">{item.couponValue}</span>满
												{item.couponCondition}可用
											</div>
											<div
												className={`select-icon ${
													item.no === payCouponInfo.no
														? "select-icon-active"
														: ""
												}`}
												onClick={this.itemCheck.bind(this, index)}
											></div>
										</div>
									</div>
								</div>
								<div
									className="tip"
									onClick={this.detShowClick.bind(this, index)}
								>
									<div className="info">详细信息</div>
									<div className="down-icon"></div>
								</div>
								{item.detShow && (
									<div className="detail">{item.couponUseDesc}</div>
								)}
							</div>
						);
					})}
				</div>
			</MainLayout>
		);
	}
}

export default selectCoupon;
